import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom'
import {
  Card,
  WingBlank,
  WhiteSpace,
} from 'antd-mobile';

import './user-list.scss'

const CardHeader = Card.Header
const CardBody = Card.Body


class UserList extends Component {

  static propTypes = {
    userList: PropTypes.array.isRequired,
  }
  
  render() {
    const { userList } = this.props
    // 公司介绍
    const Company = (company) => (
      <div>
        <WhiteSpace size="sm" />
        <div className="itemWrap">
          <span className="myLabel">公司：</span>
          <div>{company}</div>
        </div>
      </div>
    )
    // 薪资介绍
    const Salary = (salary) => (
      <div>
        <WhiteSpace size="sm" />
        <div className="itemWrap">
          <span className="myLabel">薪资：</span>
          <div>{salary}</div>
        </div>
      </div>
    )
    return (
      <div className="wrap">
        {
          userList.map((user) => (
            <WingBlank key={user._id}>
              <WhiteSpace size="lg" />
              <Card onClick={()=>this.props.history.push(`/chat/${user._id}`)}>
                <CardHeader
                  thumb={require(`../../assets/images/${user.header}.png`)}
                  extra={<span style={{fontSize: '20px'}}>{user.username}</span>}
                />
                <CardBody>
                  <div className="itemWrap">
                    <span className="myLabel">职位：</span>
                    <div>{user.post}</div>
                  </div>
                  {/* 根据用户是否有company来决定是否显示 */}
                  { user.company ? Company(user.company) : null }
                  {/* 根据用户是否有salary来决定是否显示 */}
                  { user.salary ? Salary(user.salary) : null }
                  <WhiteSpace size="sm" />
                  <div className="itemWrap">
                    <span className="myLabel">{user.type === 'laoban' ? '要求：' : '简介：'}</span>
                    <div className="info">{user.info}</div>
                  </div>
                </CardBody>
              </Card>
            </WingBlank>
          ))
        }
      </div>
    )
  }
}

export default withRouter(UserList)